$bg-color: $bg-body
$border-color: $border-default
$item-active-color: $bg-hover
$caret-width: 20px
$caret-height: 10px

// 三角形
@mixin caret-shape($direction, $color, $width, $height)
  border-#{$direction}: $height solid $color
  @if $direction == "top" or $direction == "bottom"
    border-left: $width/2 solid transparent
    border-right: $width/2 solid transparent
  @else
    border-top: $width/2 solid transparent
    border-bottom: $width/2 solid transparent

@mixin absolute-align($position, $y: 0, $x: 50%, $isNotInner: false)
  @if $isNotInner and ($position == bottom or $position == top)
    #{nth((top, bottom), index((bottom, top), $position))}: 100%
  @else
    #{$position}: $y

  @if $position == top or $position == bottom
    left: $x
    transform: translate(-50%, 0)
  @else
    top: $x
    transform: translate(0, -50%)

@mixin dropdown-mixin($direction)
  $opposite: nth((top, right, bottom, left), index((bottom, left, top, right), $direction))

  // 如果有caret，给content一个caret高度的margin
  &.fui-dropdown-has-caret
    .fui-dropdown-content
      margin-#{$opposite}: $caret-height

    .fui-dropdown-caret
      // 居中caret
      @include absolute-align($opposite, 0, 50%, true)
      @include caret-shape($direction, $border-color, $caret-width, $caret-height)

      &-inner
        @include absolute-align($opposite, 0, 0, false)
        margin-#{$opposite}: 1px
        @include caret-shape($direction, $bg-body, $caret-width, $caret-height)

// Basic
.fui-dropdown
  font-size: $font-md

  &-content
    background: $bg-color
    border: 1px solid $border-color
    border-radius: 2px
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
    text-align: center

  &-caret
    position: absolute

    &-inner
      position: absolute

// Direction
.fui-dropdown
  &-top
    @include dropdown-mixin(top)
    transform-origin: 50% 100%

  &-right
    @include dropdown-mixin(right)
    transform-origin: 0 50%

  &-bottom
    @include dropdown-mixin(bottom)
    transform-origin: 50% 0

  &-left
    @include dropdown-mixin(left)
    transform-origin: 100% 50%

// MISC
.fui-dropdown
  &-trigger
    cursor: pointer

  &-title
    display: block
    padding: 8px 10px
    cursor: default
    font-weight: bold
    white-space: nowrap

  &-item
    display: block
    padding: 8px 10px
    line-height: 14px
    cursor: pointer
    transition: background-color .2s
    font-size: $font-md
    white-space: nowrap

    &:first-child
      border-top-left-radius: 2px
      border-top-right-radius: 2px

    &:last-child
      border-bottom-left-radius: 2px
      border-bottom-right-radius: 2px

    a
      text-decoration: none

    &.active, &:hover
      background: $item-active-color

.fui-dropdown-origin-container
  position: relative
